<template>
	<div class="index-box" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品参数</span>
      </div>
      <div class="cardBox">
        <el-form  :model="manageParameters" label-position="right" class="d-flex">
          <div class="left flex1">
              <el-form-item label="候鸟供应链加价比列:" prop="hnPremiumRate" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.hnPremiumRate"  autocomplete="off"  placeholder="" clearable></el-input>%
              </el-form-item>
              <el-form-item label="扫码付款得消费券占比:" prop="consumptionCoupons" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.consumptionCoupons"  autocomplete="off"  placeholder="" clearable></el-input>%
              </el-form-item>
              <el-form-item label="好店订单结算时长:" prop="orderSettlementTime" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.orderSettlementTime"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item>
              <el-form-item label="云仓订单结算时长:" prop="ycSettlementTime" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.ycSettlementTime"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item>
          </div>
          <div class="center flex1">
              <el-form-item label="未支付取消定单时长:" prop="unpaidCancellationDuration" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.unpaidCancellationDuration"  autocomplete="off"  placeholder="" clearable></el-input>小时
              </el-form-item>
              <el-form-item label="境外海外直邮确定收货时长:" prop="overseasDeliveryTime" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.overseasDeliveryTime"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item>
              <el-form-item label="境外其他确定收货时长:" prop="otherDeliveryTime" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.otherDeliveryTime"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item>
              <el-form-item label="好店/好礼确定收货时长:" prop="hdDeliveryTime" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.hdDeliveryTime"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item>
          </div>
          <div class="right flex1">
            <!--  <el-form-item label="退款倒计时:" prop="refundCountdown" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.refundCountdown"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item>
              <el-form-item label="退货退款倒计时:" prop="returnRefundCountdown" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.returnRefundCountdown"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item> -->
              <!-- <el-form-item label="换货倒计时:" prop="replacementCountdown" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.replacementCountdown"  autocomplete="off"  placeholder="" clearable></el-input>天
              </el-form-item> -->
              <el-form-item label="附近门店最大距离:" prop="maximumRange" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.maximumRange"  autocomplete="off"  placeholder="" clearable></el-input>km
              </el-form-item>
              <el-form-item label="发货后用户申请售后自动退款时长:" prop="automaticRefund" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.automaticRefund"  autocomplete="off"  placeholder="" clearable></el-input>小时
              </el-form-item>
              <el-form-item label="发货后用户申请退款最后提醒:" prop="refundLastReminder" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="mailParam.refundLastReminder"  autocomplete="off"  placeholder="" clearable></el-input>小时
              </el-form-item>

          </div>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>会员参数</span>
      </div>
      <div class="cardBox">
        <el-table :data="memberLevelList" style="width: 100%" border >
          <el-table-column prop="name" label="会员等级" align="center"></el-table-column>
          <el-table-column prop="unionFee" label="加盟费(万元)" align="center">
            <template #default="scope">
              <div class="inputBox" v-if="scope.row.name!='普通会员'">
                <el-input size="small" v-model="scope.row.unionFee"  autocomplete="off"  placeholder="" clearable></el-input>
              </div>
              <p v-else>无</p>
            </template>
          </el-table-column>
          <el-table-column prop="unionConsumeRate" label="推荐加盟提成比例(%)" align="center">
            <template #default="scope">
              <div class="inputBox" v-if="scope.row.name!='普通会员'">
                <el-input size="small" v-model="scope.row.unionConsumeRate"  autocomplete="off"  placeholder="" clearable></el-input>
              </div>
              <p v-else>无</p>
            </template>
          </el-table-column>
          <el-table-column prop="rewardPointsMultiple" label="赠送消费积分(倍)" align="center">
            <template #default="scope">
              <el-input size="small" v-model="scope.row.rewardPointsMultiple"  autocomplete="off"  placeholder="" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="onlineConsumeRate" label="下级线上消费提成比例(%.)" :render-header="renderHeader" align="center">
             <template #default="scope">
              <div class="inputBox">
                <el-input size="small" v-model="scope.row.onlineConsumeRate"  autocomplete="off"  placeholder="" clearable></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="memberType" label="会员类型" align="center">
            <template #default="scope">
              {{scope.row.memberType=='1'?'线上会员':'线下加盟会员'}}
              <!-- <el-input size="small" v-model="scope.row.memberType"  autocomplete="off"  placeholder="" clearable></el-input> -->
            </template>
          </el-table-column>
          <el-table-column prop="offlineConsumeRate" label="下级线下消费提成比例(%.)" :render-header="renderHeader1" align="center">
             <template #default="scope">
              <div class="inputBox">
                <el-input size="small" v-model="scope.row.offlineConsumeRate"  autocomplete="off"  placeholder="" clearable></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>仟枝管理系统参数</span>
      </div>
      <div class="cardBox">
        <el-form  :model="manageParameters" label-position="right"  class="d-flex">
          <div class="left flex1">
              <!-- <el-form-item label="商品库存预警最小值:" prop="minimumCommodityInventory" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.minimumCommodityInventory"  autocomplete="off"  placeholder="" clearable></el-input>件
              </el-form-item> -->
              <el-form-item label="每月最多提现次数:" prop="wxMaximumNumber" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.wxMaximumNumber"  autocomplete="off"  placeholder="" clearable></el-input>次
              </el-form-item>
              <el-form-item label="好礼/好店推荐占位时间:" prop="recommendedTimes" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.recommendedTimes"  autocomplete="off"  placeholder="" clearable></el-input>
                <el-select size="small" v-model="manageParameters.recommendedTimesUnit" clearable>
                  <el-option label="天" value="1"></el-option>
                  <el-option label="周" value="2"></el-option>
                  <el-option label="月" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商家服务电话:" prop="storeServiceTel" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.storeServiceTel"  autocomplete="off"  placeholder="" clearable></el-input>
              </el-form-item>
              <el-form-item label="用户首次下单奖励金额:" prop="firstOrderAward" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.firstOrderAward"  autocomplete="off"  placeholder="" clearable></el-input>‰
              </el-form-item>

          </div>
          <div class="center flex1">
              <el-form-item label="最低提额:" prop="foreheadMinimum" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.foreheadMinimum"  autocomplete="off"  placeholder="" clearable></el-input>元
              </el-form-item>
              <el-form-item label="最低提现金额:" prop="wxWithdrawalAmount" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.wxWithdrawalAmount"  autocomplete="off"  placeholder="" clearable></el-input>元
              </el-form-item>
              <el-form-item label="好礼/好店及推荐推广申请:" prop="promoteApplication" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.promoteApplication"  autocomplete="off"  placeholder="" clearable></el-input>次
                <el-select size="small" v-model="manageParameters.promoteApplicationUnit" clearable>
                  <el-option label="每天" value="1"></el-option>
                  <el-option label="每周" value="2"></el-option>
                  <el-option label="每月" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户积分兑换比例:" prop="subscriptionRatio" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.subscriptionRatio"  autocomplete="off"  placeholder="" clearable></el-input>元
              </el-form-item>
              <el-form-item label="积分兑换截至时间:" prop="redemptionDeadline" label-width="205px"  style="width:100%" >
                <el-date-picker v-model="manageParameters.redemptionDeadline"  type="date"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="积分兑换截至时间"></el-date-picker>
                <el-button  @click="handleClearIntegral"  >清空积分</el-button>
              </el-form-item>
          </div>
          <div class="right flex1">
              <el-form-item label="加盟会员提额服务费百分比:" prop="membershipPercentum" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.membershipPercentum"  autocomplete="off"  placeholder="" clearable></el-input>%
              </el-form-item>
              <el-form-item label="提现服务费百分比:" prop="wxCashPercentum" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.wxCashPercentum"  autocomplete="off"  placeholder="" clearable></el-input>%
              </el-form-item>
              <el-form-item label="每月最多提额次数:" prop="maximumNumberMonth" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.maximumNumberMonth"  autocomplete="off"  placeholder="" clearable></el-input>次
              </el-form-item>
              <el-form-item label="最大支持上传视频文件:" prop="uploadedMaximumVideo" label-width="205px"  style="width:100%" >
                <el-input size="small" v-model="manageParameters.uploadedMaximumVideo"  autocomplete="off"  placeholder="" clearable></el-input>M
              </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>图片参数</span>
      </div>
      <div class="cardBox">
        <el-form  :model="manageParameters" label-position="right"  class="d-flex flex">
          <div class="left flex1">
            <el-form-item label="首页礼券Banner:" prop="bannerPicture" label-width="205px"  style="width:100%" >
              <MyUpImg :imagePreview='manageParameters.bannerPicture'  size="700" imageSize="chang" @change="imageChange($event, 'bannerPicture')" ></MyUpImg>
              <p class="red">图片规格必须为：宽 700px、高230px</p>
            </el-form-item>
          </div>
          <div class="center flex1">
            <el-form-item label="加盟凭证样板图:" prop="credentialsPicture" label-width="205px"  style="width:100%" >
              <MyUpImg :imagePreview='manageParameters.credentialsPicture'  imageSize="chang" @change="imageChange($event, 'credentialsPicture')"></MyUpImg>
            </el-form-item>
          </div>
          <div class="right flex1">
            <el-form-item label="合同拍照样板图:" prop="contractPrototypePicture" label-width="205px"  style="width:100%" >
              <MyUpImg :imagePreview='manageParameters.contractPrototypePicture'  imageSize="chang" @change="imageChange($event, 'contractPrototypePicture')"></MyUpImg>
            </el-form-item>
          </div>

        </el-form>
        <el-form  :model="manageParameters" label-position="right"  class="d-flex flex">
            <div class="left flex1" >
              <el-form-item label="商家电子合同:" prop="storeContract" label-width="205px"  style="width:100%" >
                <MyUpMoreImg :imagePreview='manageParameters.storeContract'  imageLimit="10" @change="imageChange($event, 'storeContract')" ></MyUpMoreImg>
              </el-form-item>
            </div>
            <div class="center flex1">
              <el-form-item label="支付许可证:" prop="paymentLicense" label-width="205px"  style="width:100%" >
                <MyUpImg :imagePreview='manageParameters.paymentLicense'  imageSize="chang" @change="imageChange($event, 'paymentLicense')"></MyUpImg>
              </el-form-item>
            </div>
            <div class="right flex1">

            </div>
          </el-form>
      </div>
    </el-card>
    <div class="activeBox">
        <el-button type="primary" @click="parameterSetSubmit"  :loading="btnLoading" v-has="'system:parameterSet:save'">保 存</el-button>
    </div>
	</div>
</template>

<script>
  import { getSystemSetting, updSystemSetting, clearPoints } from '@/api/getData';
	export default {
		name: 'parameterSet',
		data() {
			return {
				loading:false,
        btnLoading:false,
        imagePreview: '',
        dataList:{},
        form2:{a:''},
        form3:{a:''},
        form4:{a:''},
        form5:{a:''},
        rules1:[],
        rules:[],
        mailParam:{},
        manageParameters:{},
        memberLevelList:[]
			}
		},
		mounted() {
      this.dataInfo();
		},
		methods: {
      handleClearIntegral(){
        this.$confirm(`您确定要清除${this.manageParameters.redemptionDeadline}之前的积分吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          clearPoints().then((result) => {
            if (result.code == '200') {
                 this.$message({
                   message: result.msg,
                   type: 'success',
                 });
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch(() => {
            console.log(1);
        });
      },
      renderHeader (h, { column, $index }){
        let _this = this
        return h('div',{},[
          h('span',{
            on: {
              'click': function(){
                _this.clickHeader('0')
                console.log(1,this)
              }
            },
            class: 'header',
          },'下级线上消费提成比例(‰'),
          h('span',{}),,
          h('span',{
            on: {
              'click': function(){
                _this.clickHeader('1')
              }
            },
            class: 'header font-color',
          },')'),
        ])
      },
      renderHeader1 (h, { column, $index }){
        let _this = this
        return h('div',{},[
          h('span',{
            on: {
              'click': function(){
                _this.clickHeader('0')
                console.log(1,this)
              }
            },
            class: 'header',
          },'下级线下消费提成比例(‰'),
          h('span',{}),,
          h('span',{
            on: {
              'click': function(){
                _this.clickHeader('1')
              }
            },
            class: 'header font-color',
          },')'),
        ])
      },
      dataInfo(){
        this.loading = true;
        getSystemSetting().then((res)=>{
          if(res.code == 200){
            this.mailParam = res.data.mailParam[0];
            this.manageParameters = res.data.manageParameters[0];
            this.memberLevelList = res.data.memberLevelList;
            this.manageParameters.recommendedTimesUnit = this.manageParameters.recommendedTimesUnit+'';
            this.manageParameters.promoteApplicationUnit = this.manageParameters.promoteApplicationUnit+'';
            this.manageParameters.storeContract = this.manageParameters.storeContract?this.manageParameters.storeContract.split(','):[];
          }else{
            this.$message.error(res.msg)
          }
          this.loading = false;
        })
      },
      back(){
        this.$router.go(-1);
      },
			parameterSetSubmit() {
        let data = JSON.parse(JSON.stringify({
          mailParam:this.mailParam,
          manageParameters:this.manageParameters,
          memberLevelList:this.memberLevelList
        }))
        if(data.manageParameters.storeContract.length){
          data.manageParameters.storeContract = data.manageParameters.storeContract.join(',')
        }
        updSystemSetting(data).then((res)=>{
          if(res.code == 200){
            this.$message.success(res.msg);
          }else{
            this.$message.error(res.msg);
          }
          this.loading = false;
        })
			},
      imageChange(path, name) {
        this.manageParameters[name] = path
      },

		}
	}
</script>
<style lang="scss" scoped>
  .index-box /deep/ .bold{
    font-size: 34px;
    font-weight: bold;
  }
  .index-box{
    heigth:100vh;
    overflow-y:auto;
  }
  .box-card{
    margin-bottom:15px
  }
  .index-box /deep/ .el-input{
    width:160px;
    margin-right:10px;
  }
  .center{
    border-left:1px solid #EBEEF5;
    border-right:1px solid #EBEEF5;
  }
  .activeBox{
    display:flex;
    align-items:center;
    justify-content: center;
  }
</style>
